<template>
  <div class="weImage_editor">
    <div class="preview">
      <div class="noimage" v-if="!data.url">
        <i class="icon icon-tupian"></i>
        <p style="margin-top:-10px;">请选择图片</p>
      </div>
      <img v-else :src="data.url" alt="">
      <div
        ref="richText"
        class="rich_text"
        v-html="data.richText"
        v-drag
        @mousemove="handleDrag"
        :style="{left: initTextX + 'px', top: initTextY + 'px'}">
      </div>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="dialog=true">从素材库选择</el-button>
      <el-upload
        class="upload"
        :action="baseUrl + '/content/source/upload/image'"
        :data="params"
        :headers="headers"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :on-success="uploadSuccess">
        <el-button type="primary" size="small">上传</el-button>
      </el-upload>
    </div>
    <el-form label-width="70px" style="padding: 0 15px;">
      <el-form-item label="图片链接">
        <el-input v-model="data.link" size="small"></el-input>
      </el-form-item>
    </el-form>
    <el-checkbox v-model="ifAddRichText">在图片上添加富文本</el-checkbox>
    <!-- 加载编辑器的容器 -->
    <script v-show="ifAddRichText" :id="editorId" class="editor" name="content" type="text/plain">
    </script>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectImage" :loading="loading">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  import ueditorMixin from '@/mixins/ueditorMixin'
  import env from '@/config/env'
  export default {
    props: ['data'],
    components: {dialogImage},
    mixins: [ueditorMixin],
    data () {
      return {
        ifAddRichText: this.data.richText ? true : false,
        initTextX: this.data.richTextX,
        initTextY: this.data.richTextY,
        dialog: false,
        loading: false,
        content: this.data.richText
      }
    },
    mounted () {
      this.initUEditor()
    },
    watch: {
      ifAddRichText (val) {
        if (val) {
          this.ue.container.parentNode.style.display = 'block'
          this.data.richText = this.content
        } else {
          this.data.richText = ''
          this.ue.container.parentNode.style.display = 'none'
        }
      },
      content (val) {
        this.data.richText = val
      }
    },
    computed: {
      ...mapState({
        selected: state => state.sourceManage.selected
      }),
      baseUrl () {
        return env.baseUrl
      },
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      },
      // 文件上传附加的参数
      params () {
        return {
          contentType: 1,
          microPagImage: 1
        }
      }
    },
    methods: {
      handleSelectImage () {
        this.data.url = this.selected.url
        this.dialog = false
      },
      // 上传前的检验
      handleBeforeUpload (file) {
        if (file.type.indexOf('image') === -1) {
          this.$message.warning('只可上传图片类型')
          return false
        }
      },
      // 上传成功
      uploadSuccess (res) {
        this.data.url = res.data.url
      },
      handleDrag () {
        const $richText = this.$refs.richText
        this.data.richTextX = $richText.offsetLeft + $richText.translateX
        this.data.richTextY = $richText.offsetTop + $richText.translateY
      }
    }
  }
</script>
<style lang="scss">
  .weImage_editor{
    .preview{
      &{position:relative;min-height:200px;overflow:hidden;;}
      img{max-width:100%;}
      .rich_text{position:absolute;top:0;left:0;border:1px dashed #aaa;cursor:pointer;}
    }
    .noimage{
      &{margin-top:40px;text-align:center;color:#bbb;line-height:1}
      .icon-tupian{font-size:100px;}
    }
    .el-checkbox{margin:0 0 15px 15px;}
    .edui-default .edui-toolbar{padding: 10px;}
    .editor{margin-bottom:15px;}
    .btns{margin:8px 0 15px 15px;}
    .upload{display:inline-block;}
  }
</style>
